<template>
	<view>
		<view class="OrderCancellation">
			<view class="header"></view>

			<view class="scan" @click="scanCode">
				<image src="/static/images/scan.gif"></image>
			</view>
		</view>
		<!-- //0会员卡使用 1 购卡 2 商品 -->
		<view v-if="iShidden">
			<view class="WriteOff">
				<block v-if="params.type === 0">
					<view class="tui-block__box tui-mtop__24">
						<view>
							<text>会员卡剩余次数</text>
							<text class="tui-color__black">{{cardInfo.total - cardInfo.usedCount}}</text>
						</view>
						<view class="tui-ptop__20">
							<text>购卡时间</text>
							<text class="tui-color__black">{{cardInfo.createTime}}</text>
						</view>
						<view class="tui-ptop__20">
							<text>会员卡类型</text>
							<text class="tui-color__black">{{cardInfo.cartType === 0?"次数卡":"日期卡"}}</text>
						</view>
					</view>
					<view class="input tui-block__box tui-mtop__20">
						<text>输入使用次数</text>
						<input type="number" placeholder="0" v-model="usedCount" />
					</view>
				</block>
				<block v-if="params.type === 2">
					<view class="tui-block__box tui-mtop__24">
						<view>
							<text>订单状态</text>
							<text class="tui-color__black">{{orderInfo.status===0?"未支付":"已支付"}}</text>
						</view>
						<view class="tui-ptop__20">
							<text>下单时间</text>
							<text class="tui-color__black">{{orderInfo.createTime}}</text>
						</view>

						<view class="tui-ptop__20">
							<text>支付金额</text>
							<text class="tui-color__black money">{{orderInfo.payPrice}}</text>
						</view>
						<view class="tui-ptop__20">
							<text>会员名</text>
							<text class="tui-color__black">{{orderInfo.userName}}</text>
						</view>
						<view class="tui-ptop__20">
							<text>手机号</text>
							<text class="tui-color__black">{{orderInfo.phone}}</text>
						</view>
					</view>
				</block>
				<block v-if="params.type === 1">
					<view class="tui-block__box tui-mtop__24">
						<view>
							<text>订单状态</text>
							<text class="tui-color__black">{{cardOrderInfo.status===0?"未支付":"已支付"}}</text>
						</view>
						<view class="tui-ptop__20">
							<text>购卡时间</text>
							<text class="tui-color__black">{{cardOrderInfo.createTime}}</text>
						</view>
						<view class="tui-ptop__20">
							<text>支付金额</text>
							<text class="tui-color__black money">{{cardOrderInfo.payPrice}}</text>
						</view>
					</view>
				</block>
				<view class="tui-btn__box">
					<tui-button margin="0 20rpx 26rpx 0" type="gray" plain shape="circle" width="200rpx" height="64rpx" :size="26" @click="cancel">取消</tui-button>
					<tui-button margin="0 20rpx 26rpx 0" type="danger" plain shape="circle" width="200rpx" height="64rpx" :size="26" @click="confirm">确认</tui-button>
					
				</view>
			</view>
			<view class="mask"></view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	import {
		memberCardOrderDetail,
		memberCardOrderVerify,
		verifyOrder,
		orderDetail
	} from "@/api/order";
	import {
		getMemberCardInfo
	} from "@/api/user.js";
	import {
		memberCardUse
	} from "@/api/store.js";


	import home from '@/components/home';
	export default {
		components: {
			home
		},
		data() {
			return {
				iShidden: false,
				params: '',
				usedCount: 1,
				orderInfo: {},
				cardInfo: {},
				cardOrderInfo: {}
			}
		},
		computed: {
			...mapGetters(['isLogin', 'currentStoreId'])
		},
		methods: {

			// 扫码核
			scanCode() {
				var self = this;
				wx.scanCode({
					scanType: ["qrCode", "barCode"],
					success(res) {
						self.params = JSON.parse(res.result);
						self.codeChange();
					},
					fail(res) {
						console.log(res);
					},
				})
			},
			codeChange: function() {
				let self = this
				// let ref = /[0-9]{19}/;
				// if (!this.orderId) return self.$util.Tips({
				// 	title: '请输入核销码'
				// });
				// if (!ref.test(this.orderId)) return self.$util.Tips({
				// 	title: '请输入正确的核销码'
				// });
				self.$util.Tips({
					title: '查询中'
				});
				if (this.params.type === 0) {
					this.getMemberCard();
				} else if (this.params.type === 1) {
					this.getMemberCardOrder();
				} else {
					this.getOrder();
				}
			},
			/**
			 * 获取会员卡
			 */
			getMemberCard() {
				var self = this;
				getMemberCardInfo(this.params.id)
					.then(res => {
						self.cardInfo = res.data
						self.iShidden = true
					})
					.catch(res => {
						return self.$util.Tips({
							title: res
						});
					});
			},
			/**
			 * 获取会员卡订单
			 */
			getMemberCardOrder() {
				var self = this;
				memberCardOrderDetail(this.params.id)
					.then(res => {
						self.cardOrderInfo = res.data
						self.iShidden = true
					})
					.catch(res => {
						return self.$util.Tips({
							title: res
						});
					});
			},
			/**
			 * 获取商品订单
			 */
			getOrder() {
				var self = this;
				orderDetail(this.params.id)
					.then(res => {
						self.orderInfo = res.data
						self.iShidden = true
					})
					.catch(res => {
						return self.$util.Tips({
							title: res
						});
					});
			},
			/**
			 * 确定销码
			 */
			confirm: function() {
				if (this.params.type === 0) {
					this.memberCardVerify();
				} else if (this.params.type === 1) {
					this.memberOrderVerify();
				} else {
					this.orderVerify();
				}
			},
			/**
			 * 取消
			 */
			cancel: function() {
				this.iShidden = false
			},
			memberCardVerify() {
				let self = this
				memberCardUse(this.cardInfo.id, this.usedCount, this.currentStoreId)
					.then(res => {
						self.cardInfo = {}
						self.iShidden = false
						self.$util.Tips({
							title: res.msg
						});
					})
					.catch(res => {
						self.$util.Tips({
							title: res
						});
					});
			},
			memberOrderVerify() {
				let self = this
				memberCardOrderVerify(this.cardOrderInfo.id, this.currentStoreId)
					.then(res => {
						self.cardOrderInfo = {}
						self.iShidden = false
						self.$util.Tips({
							title: res.msg
						});
					})
					.catch(res => {
						self.$util.Tips({
							title: res
						});
					});
			},
			orderVerify() {
				let self = this

				verifyOrder(this.orderInfo.id, this.currentStoreId)
					.then(res => {
						self.orderInfo = {}
						self.iShidden = false
						self.$util.Tips({
							title: res.msg
						});
					})
					.catch(res => {
						self.$util.Tips({
							title: res
						});
					});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: .5;
		z-index: 5
	}

	.OrderCancellation .header {
		background-image: url('');
		width: 100%;
		height: 300rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.WriteOff .input {
		width: 90%;
		margin: 0 auto;
		border-bottom: 1rpx solid #eee;
	}

	.WriteOff .input input {
		font-size: 60rpx;
		color: #282828;
		width: 100%;
		text-align: center;
		line-height: 80rpx;
		height: 80rpx
	}

	.OrderCancellation {
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.OrderCancellation .whiteBg {
		width: 90%;
		background-color: #fff;
		margin: -93rpx auto;
		padding-top: 80rpx;
		border-radius: 6rpx 0;
	}

	.OrderCancellation .whiteBg .input {
		width: 90%;
		margin: 0 auto;
		border-bottom: 1rpx solid #eee;
	}

	.OrderCancellation .whiteBg .input input {
		font-size: 60rpx;
		color: #282828;
		width: 100%;
		text-align: center;
		line-height: 80rpx;
		height: 80rpx
	}

	.OrderCancellation .whiteBg .bnt {
		font-size: 32rpx;
		color: #fff;
		width: 80%;
		height: 86rpx;
		border-radius: 43rpx;
		background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);
		text-align: center;
		line-height: 86rpx;
		margin: 55rpx auto 0 auto;
	}

	.OrderCancellation .scan {
		width: 300rpx;
		height: 300rpx;
		margin: 160rpx auto 0 auto;
	}

	.OrderCancellation .scan image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.WriteOff {
		width: 560rpx;
		height: auto;
		background-color: #fff;
		border-radius: 20rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-top: -400rpx;
		margin-left: -280rpx;
		z-index: 99;
		padding-top: 55rpx;
	}

	.WriteOff .pictrue {
		width: 340rpx;
		height: 340rpx;
		margin: 0 auto;
	}

	.WriteOff .pictrue image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 10rpx;
	}

	.WriteOff .num {
		font-size: 30rpx;
		color: #666;
		margin: 28rpx 0 30rpx 0;
	}

	.WriteOff .num .see {
		font-size: 16rpx;
		color: #fff;
		border-radius: 4rpx;
		background-color: #c68937;
		padding-left: 5rpx;
		margin-left: 12rpx;
	}

	.WriteOff .num .see .iconfont {
		font-size: 15rpx;
	}

	.WriteOff .tip {
		font-size: 36rpx;
		color: #282828;
		text-align: center;
		border-top: 1px dashed #ccc;
		padding-top: 40rpx;
		position: relative;
	}

	.WriteOff .tip:after {
		content: "";
		position: absolute;
		width: 25rpx;
		height: 25rpx;
		border-radius: 50%;
		background-color: #7f7f7f;
		right: -12.5rpx;
		top: -12.5rpx;
	}

	.WriteOff .tip:before {
		content: "";
		position: absolute;
		width: 25rpx;
		height: 25rpx;
		border-radius: 50%;
		background-color: #7f7f7f;
		left: -12.5rpx;
		top: -12.5rpx;
	}

	.WriteOff .sure {
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		line-height: 82rpx;
		height: 82rpx;
		width: 460rpx;
		border-radius: 41rpx;
		margin: 40rpx auto 0 auto;
		background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);
		background-image: -webkit-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
		background-image: -moz-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
	}

	.WriteOff .sure.cancel {
		background-image: none;
		color: #999;
		margin-top: 10rpx;
	}

	.views {
		font-size: 18rpx;
		background: #C68937;
		border-radius: 4px;
		color: #fff;
		padding: 5rpx 2rpx 5rpx 8rpx;
		margin-left: 10rpx;
	}

	.views-jian {
		font-size: 10px;
	}

	.tui-block__box {
		width: 100%;
		padding: 40rpx 25rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		font-size: 24rpx;
		color: #999;
		box-shadow: 0 15rpx 10rpx -15rpx #efefef;
	}

	.tui-mtop__24 {
		margin-top: 24rpx;
	}

	.tui-ptop__20 {
		padding-top: 20rpx;
	}

	.tui-color__black {
		color: #333;
		padding-left: 40rpx;
	}

	.tui-color__red {
		color: #eb0909;
		padding-left: 40rpx;
	}

	.tui-invoice__box {
		width: 100%;
		position: relative;
		font-size: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tui-invoice__logo {
		width: 150rpx;
		height: 86rpx;
	}

	.tui-invoice__title {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		padding-left: 0 !important;
	}

	.tui-flex__between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tui-btn__box {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tui-modal-custom {
		text-align: center;
	}

	.tui-prompt-title {
		padding-bottom: 20rpx;
		font-size: 34rpx;
	}

	.tui-modal-input {
		width: 100%;
		height: 68rpx;
		background-color: #FAFAFA;
		margin: 40rpx auto 60rpx;
		font-size: 30rpx;
		text-align: left;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-radius: 30px;
	}

	.tui-hidden-input {
		/* #ifdef MP-WEIXIN */
		width: 0;
		/* #endif */
	}

	.tui-modal__btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-box {
		flex: 1;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	
	.money {
		font-size: 30rpx;
		color: #f11b09;
	}
</style>
